import React, { useEffect, useState } from 'react'

import { List, Button, Divider, Input, message, Skeleton, Popconfirm, Modal } from 'antd';
import { UnlockOutlined } from '@ant-design/icons';


import styles from './index.module.css'


//网络请求
import { getAllUser, deleteUser, changePwd } from '../../../utils/axiosRequest/api'
//持久化
import { setCache, getCache } from '../../../utils/cache/'


function DelUser() {

    //用户
    const [userList, setUserList] = useState([]);
    const [isLoad, setLoadState] = useState(true);
    //消息提示
    const [messageApi, contextHolder] = message.useMessage();
    //修改密码弹框
    const [isModalOpen, setIsModalOpen] = useState(false);
    //用户输入的密码
    const [intUserPwd, setIntUserPwd] = useState('');
    //当前修改的用户
    const [currentUserName, setCurrentUserName] = useState('');



    //[]空数组相当于componentDidMount
    useEffect(() => {
        //获取所有用户
        initData();

        //返回的函数相当于unmountComponentAtNode
        return () => {

        }
    }, []);

    function initData() {
        const params = new Map()
        getAllUser(params)
            .then(response => {
                const data = response.data
                if (data.code === 1000) {
                    setLoadState(false)
                    setUserList(data.data)
                } else {
                    //处理失败
                    messageApi.open({ type: 'error', content: data.des });
                }
            })
            .catch(error => {
                messageApi.open({ type: 'error', content: error.message });
            });
    }

    function clickSearch() {
        messageApi.open({ type: 'error', content: '暂不支持搜索用户！' });
    }

    function confirm(userName) {
        const params = new Map()
        params.set('userName', userName)
        deleteUser(params)
            .then(response => {
                const data = response.data
                if (data.code === 1000) {
                    messageApi.open({ type: 'error', content: '删除成功！' });
                    initData();
                } else {
                    //处理失败
                    messageApi.open({ type: 'error', content: data.des });
                }
            })
            .catch(error => {
                messageApi.open({ type: 'error', content: error.message });
            });
    }

    function changePassword(userName) {
        setIsModalOpen(true)
        setCurrentUserName(userName)
    }

    function handleOk() {
        setIsModalOpen(false);
        const params = new Map()
        params.set('userName', currentUserName)
        params.set('userPwd', intUserPwd)
        changePwd(params)
            .then(response => {
                const data = response.data
                if (data.code === 1000) {
                    messageApi.open({ type: 'error', content: '修改密码成功！' });
                    initData();
                } else {
                    //处理失败
                    messageApi.open({ type: 'error', content: data.des });
                }
            })
            .catch(error => {
                messageApi.open({ type: 'error', content: error.message });
            });
        setIntUserPwd('')
    }

    function onChangePwd(val) {
        let userPwd = val.target.value
        setIntUserPwd(userPwd)
    }


    function handleCancel() {
        setIsModalOpen(false);
        setIntUserPwd('')
    }

    function cancel() {

    }

    return (
        <div>
            <Modal cancelText="取消" okText="确定" title="修改密码" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <Input value={intUserPwd} onChange={onChangePwd} size="large" placeholder="请输入密码..." prefix={<UnlockOutlined />} />
            </Modal>
            {contextHolder}
            <div className={styles.search}>
                <Input placeholder="请输入账号..."></Input>
                <Button className={styles.searchBtn} type="primary" onClick={clickSearch} >搜索</Button>
            </div>
            <Skeleton loading={isLoad}>
                <List
                    className={styles.list_content}
                    itemLayout="horizontal"
                    dataSource={userList}
                    renderItem={(item) => (
                        <div className={styles.item_content}>
                            <div className={styles.item}>
                                <span className={styles.item_text}>账号： {item.userName}</span>
                                <Button className={styles.item_edit} type="primary" onClick={() => { changePassword(item.userName) }}>修改密码</Button>
                                <Popconfirm
                                    title="删除"
                                    description="您确定要删除该用户吗？"
                                    onConfirm={() => { confirm(item.userName) }}
                                    onCancel={cancel}
                                    okText="确定"
                                    cancelText="关闭">
                                    <Button className={styles.item_del} danger>删除用户</Button>
                                </Popconfirm>
                            </div>
                            <Divider></Divider>
                        </div>
                    )}
                />
            </Skeleton>
        </div>
    )
}

export default DelUser;
